<template>
    <div>
        <quill-editor ref="myTextEditor"  v-model="local_content" :options="editorOptions"  style="height:60vh;"  @change="onEditorChange">
        </quill-editor>
        <Upload class="avatar-uploader"  :on-success="uploadSuccess" :action="uploadUrl" ></Upload>
        <!-- <Input v-model="local_content" type="textarea" :rows="32" placeholder="请输入内容..." /> -->
    </div>
</template>

<script>
import { put_object} from  '@/api'

const toolbarOptions = [
    ["bold","italic","underline","strike"],
    ['code-block'],
    [{ 'header': 1 }, { 'header': 2 }],
    [{ 'indent': '-1'}, { 'indent': '+1' }],   
    [{ 'color': [] }],  
    ['clean'],  
    ["image"],
];
// tiff无法正常显示
const fileType = ['jpeg','jpg','bmp','png','webp']
const videoType = [ 'mp4','mp3',"mpeg","x-msvideo",'quicktime']

export default {
    name: 'myEditor',
    props: ['defaultContent'],
    data() {   
        return {
            uploadUrl: put_object,
            editorOptions: {
                placeholder: '编辑文章内容',
                theme: "snow",
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers:  {
                            image: function(value) {
                                   if(value) {
                                        document.querySelector(".avatar-uploader input").click();
                                   }else {
                                       this.quill.format("image",false);
                                   }
                            },
                        }
                    },
                },

            },
            local_content: '',
        }
    },
    methods: {
        onEditorChange(event){
            // console.log(event.html)
            // v-model需要这里发出来的数据
            this.$emit('input',event.html)
        },
        uploadSuccess(res){
            let info = JSON.stringify(res)
            if(info.indexOf('ok') != -1) {
                let accessUrl= res.download_url;
                // console.log("上传：",file.name,accessUrl)
                this.$Message.success('上传成功')
                let quill = this.$refs.myTextEditor.quill;
                // 获取光标所在位置
                let length = quill.getSelection().index;
                let type  = res.ftype.split("/")[1]
                // 插入图片
                if(fileType.indexOf(type) != -1){
                    quill.insertEmbed(length,"image",accessUrl)
                }
                // 插入视频
                else if(videoType.indexOf(type) != -1){
                    quill.insertEmbed(length,"video",accessUrl)
                }
                else{
                    quill.insertEmbed(length,"image",accessUrl)
                    this.$Message.error("无法识别文件类型")
                }
                
                quill.setSelection(length + 3);
            }else {
                this.$Message.error('上传失败')
            }
        },
    },
    mounted: function() {
        this.local_content = this.defaultContent
    },
    watch: {
        defaultContent: function(newVal){
            this.local_content = newVal
        }
    }
}
</script>
<style scoped>

</style>